<script lang="ts">
	import { userIdentity } from '$lib/AniList/identity.js';
	import type { Badge } from '$lib/userBadgesDatabase.js';
	import { onMount } from 'svelte';

	export let data;

	let editMode = false;
	let currentUserIdentity: ReturnType<typeof userIdentity>;

	onMount(async () => {
		if (data.user) {
			currentUserIdentity = userIdentity(data.user);
		} else {
			currentUserIdentity = new Promise((resolve) =>
				resolve({
					name: 'Guest',
					id: -1
				})
			);
		}
	});

	const submitBadge = () => {
		const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
		const description = document.querySelector('input[name="description"]') as HTMLInputElement;

		fetch(
			`/api/badges/add?image=${encodeURIComponent(imageURL.value)}&post=${encodeURIComponent(
				activityURL.value
			)}&description=${encodeURIComponent(description.value)}`,
			{
				method: 'POST'
			}
		).then(() => {
			imageURL.value = '';
			activityURL.value = '';
			description.value = '';
		});
	};

	const removeBadge = (badge: Badge) => {
		fetch(`/api/badges/remove?id=${badge.id}`, {
			method: 'POST'
		}).then(() => {
			(document.querySelector(`#badge-${badge.id}`) as HTMLAnchorElement).style.display = 'none';
		});
	};
</script>

{#await currentUserIdentity}
	Loading ...
{:then identity}
	{@const isOwner = identity && identity.name === data.username}
	<p>
		<a href={`/user/${data.username}`}>Back to Profile</a>
		{#if isOwner}
			•
			<a href={`#`} on:click={() => (editMode = !editMode)}>
				{editMode ? 'Disable' : 'Enable'} Edit Mode
			</a>
		{/if}
	</p>

	{#if editMode && isOwner}
		<p>
			Delete mode is enabled. Click on an image to delete it. There is no confirmation, so be
			careful!
		</p>

		<p>
			<input type="text" placeholder="Image URL" name="image_url" minlength="1" maxlength="1000" />
			<input
				type="text"
				placeholder="Activity URL"
				name="activity_url"
				minlength="1"
				maxlength="1000"
			/>
			<input
				type="text"
				placeholder="Description (Optional)"
				name="description"
				minlength="1"
				maxlength="1000"
			/>
			<a href={`#`} on:click={submitBadge}>Add Badge</a>
		</p>
	{/if}

	<div id="badges">
		{#each data.badges as badge}
			{#if editMode}
				<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
					<img src={badge.image} alt={badge.description} />
				</a>
			{:else}
				<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
					<img src={badge.image} alt={badge.description} />
				</a>
			{/if}
		{/each}
	</div>
{/await}

<style>
	/* body {
		margin: 0;
		padding: 0;
		text-align: center;
		background-color: #151f2e;
	} */

	img {
		width: 100%;
		height: auto;
	}

	#badges {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
		grid-gap: 0;
	}
</style>
